<template>
  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"><Icon :type="icon" :size="size" /></a>
</template>
<script>
    export default {
        name: 'siderTrigger',
        props: {
            collapsed: Boolean,
            icon: {
                type: String,
                default: 'navicon-round'
            },
            size: {
                type: Number,
                default: 18
            }
        },
        methods: {
            handleChange () {
                this.$emit('on-change', !this.collapsed)
            }
        }
    }
</script>
<style lang="less" scoped>
@import './sider-trigger.less';
  .sider-trigger-a{
    padding: 12px 6px;
  }
</style>
